<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计</title>
    <link href="../css/statistics.css" rel="stylesheet" type="text/css">
    <script src="../echarts/echarts.js"></script>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="../js/main.js"></script>
</head>
<body>
<h1>统计:</h1>
<div class="div1">

    <div class="div_sel">
        <label class="p3">&nbsp;按：&nbsp;</label>
        <select class="sel1" id="time">
            <option value="1">年</option>
            <option value="2">季度</option>
            <option value="3">月</option>
        </select>
        <label class="p3">统计</label>

        <select class="sel1" id="time2">
            <!--<option>&#45;&#45;请选择</option>-->
        </select>
        <br/>
        <label class="p3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <select class="sel1" id="opt">

        </select>
        <label class="p2">至</label>

        <select class="sel1" id="opt1">

        </select>
        <br/>

    </div>
</div>


<div id="chartmain" style="width:800px; height: 400px;"></div>
<div id="chartmain1" style="width:400px; height: 300px;"></div>
<div id="chartmain2" style="width:400px; height: 300px;"></div>
<div id="chartmain3" style="width:400px; height: 300px;"></div>


<!--<div class="div3">-->

<!--</div>-->

</body>

<script>


    $.ajaxSetup({
        xhrFields: {
            withCredentials: isCrossDomain
        }
    });
    $(function () {

        $("#time2").hide();
        getDataFormService();
        $("#time").change(function () {
            datas.type = $("#time option:selected").val();
            getDataFormService();
        });



        $("#time2").change(function () {
           setSelect($("#time2 option:selected").val(),datas.type);
            dealWithData();
        });

        $("#opt").change(function () {
            setOpt();
            dealWithData();
        });

        $("#opt1").change(function () {
            dealWithData();
        });
    });

    function setSelect(year,type) {
        if(type==1) {
            addOptions("#opt",parseInt(datas.year[0]),datas.year.length);
            addOptions("#opt1",parseInt(datas.year[0]),datas.year.length);
            $("#opt1 option:last").prop("selected",true);
        } else if(type == 2) {
            var a = new Array();
            var k=-1;
            for (var i=1; i<=4;i++) {
               if(datas.times.indexOf(year+""+i)>=0){
                   a[++k] = i;
               }
            }
            addOptions1("#opt",a);
            addOptions1("#opt1",a);
            $("#opt1 option:last").prop("selected",true);
        } else {
            var a = new Array();
            var k=-1;
            for (var i=1; i<=12;i++) {
                if(i<10) {
                    if(datas.times.indexOf(year+"0"+i)>=0){
                        a[++k] = i;
                    }
                } else {
                    if(datas.times.indexOf(year+""+i)>=0){
                        a[++k] = i;
                    }
                }
            }
            addOptions1("#opt",a);
            addOptions1("#opt1",a);
            $("#opt1 option:last").prop("selected",true);
        }
    }


    function setOpt() {
        var a = parseInt($("#opt option:first").val()) ;
        var b = parseInt($("#opt option:last").val());
        var begin = parseInt($("#opt option:selected").val());
        var end = parseInt($("#opt1 option:selected").val());
        if((end-begin)<0){
            $("#opt1 option[value='"+begin+"']").prop("selected",true);
        }
        for(var i=a; i<begin; i++) {
            $("#opt1 option[value='"+i+"']").hide();
        }
        for(var i=begin; i<=b; i++) {
            $("#opt1 option[value='"+i+"']").show();
        }
    }

    function dealWithData() {
        var year = $("#time2 option:selected").val();
        var begin = $("#opt option:selected").val();
        var end = $("#opt1 option:selected").val();
        var beginId = 0;
        var endId = 0;
        if(datas.type==1) {
            data1.title="按年统计";
            beginId=datas.times.indexOf(begin);
            endId=datas.times.indexOf(end);
        } else if(datas.type==2) {
            data1.title="按季统计";
            beginId=datas.times.indexOf(year+""+begin);
            endId=datas.times.indexOf(year+""+end);
        } else {
            data1.title="按月统计";
            if(begin<10) {
                beginId=datas.times.indexOf(year+"0"+begin);
            } else {
                beginId=datas.times.indexOf(year+""+begin);
            }
            if(end<10) {
                endId=datas.times.indexOf(year+"0"+end);
            } else {
                endId=datas.times.indexOf(year+""+end);
            }
        }
        data1.xAxisData=[];
        data1.seriesData1=[];
        data1.seriesData2=[];
        data1.seriesData3=[];
        data1.seriesData4=[];
        data1.seriesData5=[];
        data1.seriesData6=[];
        var k = 0;
        for(var i=beginId; i<=endId; i++){
            data1.xAxisData[k]=dealTime(datas.times[i]);
            data1.seriesData1[k]=datas.sum[i];
            data1.seriesData2[k]=datas.turnover[i];
            data1.seriesData3[k]=datas.benefits[i];
            data1.seriesData4[k]={name:dealTime(datas.times[i]),value:datas.sum[i]};
            data1.seriesData5[k]={name:dealTime(datas.times[i]),value:datas.turnover[i]};
            data1.seriesData6[k]={name:dealTime(datas.times[i]),value:datas.benefits[i]};
            k++;
        }

        startPaint();
    }


    function startPaint() {
        option = {
            title: {
                text: data1.title
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
//            data:['成果数量','成员数量','经济效益']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: data1.xAxisData
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: ' 成果联系数量',
                    type: 'bar',
                    data: data1.seriesData1,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '成交数量',
                    type: 'bar',
                    data: data1.seriesData2,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name: '经济效益',
                    type: 'bar',
                    data: data1.seriesData3,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }

            ]
        };


        option1 = {
            title: {
                text: '成果联系数量',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: data1.xAxisData
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '成果联系数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data1.seriesData4
                }
            ]
        };

        option2 = {
            title: {
                text: '成交数量',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: data1.xAxisData
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '成交数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data1.seriesData5
                }
            ]
        };

        option3 = {
            title: {
                text: '经济效益',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: data1.xAxisData
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '经济效益',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data1.seriesData6
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('chartmain'));
        myChart.setOption(option);

        myChart = echarts.init(document.getElementById('chartmain1'));
        myChart.setOption(option1);

        myChart = echarts.init(document.getElementById('chartmain2'));
        myChart.setOption(option2);

        myChart = echarts.init(document.getElementById('chartmain3'));
        myChart.setOption(option3);
    }


    function getDataFormService() {
        $.post(mainurl+"admin/statistics",{timeClass:datas.type},function (data) {
           if(checkData(data)){
               var dat =data.data;
               datas.times=[];
               datas.sum=[];
               datas.turnover=[];
               datas.benefits=[];
               if(datas.type==1) {
                   datas.year=[];
                   for(var i=0; i<dat.length; i++){
                       datas.times[i]=dat[i].times;
                       datas.sum[i]=dat[i].sum;
                       datas.turnover[i]=dat[i].turnover;
                       datas.benefits[i]=dat[i].benefits;
                       datas.year[i]=dat[i].times;
                   }
                   addOptions("#time2",parseInt(datas.year[0]),datas.year.length);
                   $("#time2 option:last").prop("selected",true);
               } else {
                   for(var i=0; i<dat.length; i++){
                       datas.times[i]=dat[i].times;
                       datas.sum[i]=dat[i].sum;
                       datas.turnover[i]=dat[i].turnover;
                       datas.benefits[i]=dat[i].benefits;
                   }
               }
               var year =  $("#time2 option:selected").val();
               setSelect(year,datas.type);
               if(datas.type == 1) {
                   $("#time2").hide();
               } else if(datas.type == 2) {
                   $("#time2").show();
               } else {
                   $("#time2").show();
               }
               dealWithData();
           }
        });
    }


    function dealTime(str) {
        if (datas.type==1){
            return str+"年";
        }else if(datas.type==2) {
            return "第"+str.substring(4)+"季度";
        } else {
            return str.substring(4)+"月";
        }
    }

    function addOptions(obj,begin,len) {
        $(obj+" option").remove();
        for(var i=0; i<len; i++){
            $(obj).append(
                "<option value="+(i+begin)+">"
                + (i+begin) + "</option>");
        }
    }

    function addOptions1(obj,a) {
        $(obj+" option").remove();
        for(var i=0; i<a.length; i++){
            $(obj).append(
                "<option value="+ a[i] +">"
                + a[i] + "</option>");
        }
    }

    var datas= {
        type:1,
        year:[],
        times:[],
        sum:[],
        turnover:[],
        benefits:[]
    };




    var data1= {
        title:"按年统计",
        xAxisData:[],
        seriesData1:[],
        seriesData2:[],
        seriesData3:[],
        seriesData4:[{value: null, name: null}],
        seriesData5:[{value: null, name: null}],
        seriesData6:[{value: null, name: null}]
    };


    function data(){

    }






    // function gettime() {
    //     var s = document.getElementById("time");
    //     for (var v in timeArr) {
    //         s.add(new Option(v, v), null);
    //     }
    //
    // }
    //
    // function getopt() {
    //     var s = document.getElementById("time");
    //     var c = document.getElementById("opt");
    //     var a = document.getElementById("opt1");
    //     var v = s.value;
    //     var i;
    //     c.options.length = 0;
    //     a.options.length = 0;
    //
    //     for (i in timeArr[v]) {
    //         c.add(new Option(timeArr[v][i], timeArr[v][i]), null);
    //         a.add(new Option(timeArr[v][i], timeArr[v][i]), null);
    //     }
    //
    //     if (v != "年") {
    //         document.getElementById("nian").style.visibility = "visible";
    //     } else {
    //         document.getElementById("nian").style.visibility = "hidden";
    //     }
    //
    // }
    //
    // function sltCheck() {
    //     var slt = document.getElementById("select_type");
    //     var tm = document.getElementById("time");
    //     var opt = document.getElementById("opt");
    //     var opt1 = document.getElementById("opt1");
    //     if (slt.value === "" || tm.value === "" || opt.value === "" || opt1.value == "") {
    //         alert("请选择一个项目");
    //         return false;
    //     }
    //     return true;
    // }
    //
    // function changea() {
    //     var year1 = document.getElementById("opt").value;
    //     var s = document.getElementById("time");
    //     var v = s.value;
    //     var y1;
    //     if (v == "年") {
    //         var y = year1.substring(3, 4);
    //         y1 = parseInt(y);
    //     }
    //     if (v == "月") {
    //         var y = year1.substring(0, 2);
    //         if (isNaN(y)) {
    //             y = year1.substring(0, 1);
    //             y1 = parseInt(y) - 1;
    //         } else {
    //             y1 = parseInt(y) - 1;
    //         }
    //     }
    //     if (v == "季度") {
    //         var y1 = year1.substring(1, 2);
    //         if (y1 == "一") {
    //             y = 0;
    //         }
    //         if (y1 == "二") {
    //             y = 1;
    //         }
    //         if (y1 == "三") {
    //             y = 2;
    //         }
    //         if (y1 == "四") {
    //             y = 3;
    //         }
    //         y1 = parseInt(y);
    //     }
    //     var timeArr1 = new Array();
    //     timeArr1[v] = timeArr[v].slice(y1);
    //     var a = document.getElementById("opt1");
    //     a.options.length = 0;
    //     for (var i in timeArr1[v]) {
    //         a.add(new Option(timeArr1[v][i], timeArr1[v][i]), null);
    //         if (v != "年") {
    //             document.getElementById("nian").style.visibility = "visible";
    //         }
    //     }
    //
    //
    // }

</script>
</html>